<template>
  <!--表单组件-->
  <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
    <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="form.type" size="mini" style="width: 178px">
          <el-radio-button label="0">目录</el-radio-button>
          <el-radio-button label="1">菜单</el-radio-button>
          <el-radio-button label="2">按钮</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="typeList[form.type] + '名称'" prop="name">
        <el-input v-model="form.name" style="width: 450px;" />
      </el-form-item>
      <el-form-item label="路径" prop="url">
        <el-input v-model="form.url" style="width: 450px;" />
      </el-form-item>
      <el-form-item v-show="form.type.toString() === '1'" label="组件" prop="component">
        <el-input v-model="form.component" style="width: 450px;" />
      </el-form-item>
      <el-form-item label="是否隐藏" prop="hidden">
        <el-switch
          v-model="form.hidden"
          :active-value="true"
          :inactive-value="false"
          active-color="#409EFF"
          inactive-color="#F56C6C"
        />
      </el-form-item>
      <el-form-item v-show="form.type.toString() !== '2'" :label="typeList[form.type] + '图标'" prop="icon">
        <el-popover
          placement="bottom-start"
          width="450"
          trigger="click"
          @show="$refs['iconSelect'].reset()"
        >
          <IconSelect ref="iconSelect" @selected="selected" />
          <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
            <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
          </el-input>
        </el-popover>
      </el-form-item>
      <el-form-item v-show="form.type.toString() !== '2'" label="排序" prop="orderNum">
        <el-input-number
          v-model.number="form.orderNum"
          :min="0"
          :max="999"
          controls-position="right"
          style="width: 370px;"
        />
      </el-form-item>
      <el-form-item v-show="form.type.toString() !== '0'" label="授权标识" prop="perms">
        <el-input v-model="form.perms" placeholder="多个用逗号分隔, 如: user:list,user:create" style="width: 450px;" />
      </el-form-item>
      <el-form-item style="margin-bottom: 0;" label="上级类目" prop="parentId">
        <treeselect
          v-model="form.parentId"
          :options="menus"
          style="width: 370px;"
          placeholder="选择上级类目"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="crud.cancelCU">取消</el-button>
      <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
    </div>
  </el-dialog>

</template>

<script>
import CRUD, { form } from '@crud/crud'
// import the component
import Treeselect from '@riophae/vue-treeselect'
import IconSelect from '@/components/IconSelect'

// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { list_to_vuetree } from '@/utils'
import { getMenuList } from '@/api/sys/menu'

const defaultForm = { menuId: null, type: 0, name: null, parentId: 0, orderNum: '', perms: '', icon: '', hidden: false, component: '' }

export default {
  components: {
    Treeselect,
    IconSelect
  },
  mixins: [form(defaultForm)],

  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      menus: [],
      typeList: ['目录', '菜单', '按钮'],
    }
  },
  watch: {
    'form.type': function(v) {
      getMenuList().then(res => {
        this.menus = [{ id: 0, label: '顶级类目', children: list_to_vuetree(res.data.list, 'menuId', 'name') }]
      })
    }
  },
  created() {
    getMenuList().then(res => {
      this.menus = [{ id: 0, label: '顶级类目', children: list_to_vuetree(res.data.list, 'menuId', 'name') }]
    })
  },
  methods: {
    [CRUD.HOOK.afterRefresh]: function() {
      getMenuList().then(res => {
        this.menus = [{ id: 0, label: '顶级类目', children: list_to_vuetree(res.data.list, 'menuId', 'name') }]
      })
    },
    // 选中图标
    selected(name) {
      this.form.icon = name
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
